<template>
    <div class="dayin">
        <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button>
        <div ref="print" id="printArea">
        <div v-for="(item, index) in dayinlist" :key="index">
          <table border="0">
            <thead>
              <tr>
                <th colspan="6">
                  {{ item.order.customer.customer_name }}的出库单
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td width="100">单号</td>
                <td colspan="2">{{ item.order.order_num }}</td>
              </tr>
              
              
            </tbody>
          </table>
          <div style="page-break-after: always"></div>
        </div>
      </div>
    </div>
</template>

<script>

export default {
    data(){
       return{
        dayinlist:[]
       }
    },
    mounted(){
        this.dayinlist= JSON.parse(this.$route.query.data)
        console.log(JSON.parse(this.$route.query.data))
    },
    methods:{
        print(){
            this.$print(this.$refs.print);
        }
    }

}
</script>
<style scoped>
    .dayin{
        padding: 25px;
        box-sizing: border-box;
    }

    #printArea {
  width: 100%;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  height: 35px;
  line-height: 35px;
}
#printArea table thead th {
  background-color: #0a8fa1;
}

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn{
    background: #0a8fa1;
    border: none;
    margin: 20px 0;
}
    
</style>